<template>
	<!-- 修改党员信息 -->
  <div class="stu">
	 <el-dialog v-loading="loading"  :title="num==0?'新增党员信息':'修改党员信息'" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" top='1vh' :close-on-click-modal='false'>
	    <div style="width:100%;padding-left:20px;padding-bottom:30px;">
			
			<div class="tabs">
				<div class="pbox"><a>* </a>姓名</div>
				<el-input class='tabinp' v-model="activess.name" placeholder="请输入" clearable></el-input>
			</div>
			<div class="tabs">
				<div class="pbox"><a>* </a>身份证号</div>
				<el-input class='tabinp' v-model="activess.card" placeholder="请输入" clearable></el-input>
			</div>
			<div class="tabs">
				<div class="pbox"><a>* </a>学历</div>
				<el-select v-model="activess.edu_id" clearable placeholder="请选择" class='tabinp'>
				    <el-option v-for="item in $store.state.xueli" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
			<div class="tabs">
				<div class="pbox"><a>* </a>联系电话</div>
				<el-input class='tabinp' v-model="activess.phone" placeholder="请输入" clearable></el-input>
			</div>
			<div class="tabs">
				<div class="pbox"><a>* </a>支部名称</div>
				<el-input class='tabinp' v-model="activess.party_unit" placeholder="请输入" clearable></el-input>
			</div>
			<div class="tabs">
				<div class="pbox"><a>* </a>党员类别</div>
				<el-select v-model="activess.politic_id" clearable placeholder="请选择" class='tabinp'>
				    <el-option v-for="item in $store.state.dangyuan_sx" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
			<div class="tabs">
				<div class="pbox"><a>* </a>入党日期</div>
				<el-date-picker v-model="activess.party_time" value-format='yyyy-MM-dd' type="date" placeholder="选择日期" clearable class='tabinp'></el-date-picker>
			</div>
			<div class="tabs">
				<div class="pbox"><a>* </a>是否流动党员</div>
				<el-radio v-model="activess.is_float" label="1">是</el-radio>
				<el-radio v-model="activess.is_float" label="0">否</el-radio>
			</div>
			<div class="tabs">
				<div class="pbox"><a>* </a>经纬度</div>
				<el-input class='tabinp' style="width:34%;" v-model="activess.lon" placeholder="经度" clearable></el-input>
				<el-input class='tabinp' style="width:34%;margin-left:10px;" v-model="activess.lat" placeholder="纬度" clearable></el-input>
			</div>
			<div class="tabs" style="height:155px;">
				<div class="pbox"><a> </a>头像</div>
				<div style="width:155px;height:155px;overflow:hidden;">
							<el-upload
								:limit='1' 
								action="/dj/index/import_pic"
								name='img'
								:on-success='qing_sur'
								:file-list='img_files1'
							    list-type="picture-card" :on-remove="handleRemove"><i class="el-icon-plus"></i>
							</el-upload>
				</div>
			</div>
			
		</div>	
		<div style="width:100%;height:40px;margin-top:20px;">
	      <div style="width:170px;margin: 0 auto;">
	        <el-button type="danger" @click="handleClose">取 消</el-button>
	        <el-button style='float:right;' type="primary" @click="git_acts">确 定</el-button>
	      </div>
		</div>
	 </el-dialog>
	
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'stu',
  components: {},//声明子组件
  computed:{
	img_files1(){return this.ader},//图片反向赋值
    isNull(){//判断文本输入框是否为纯空格或者空
    		return function( str ){
        if ( str == "" ) return true;
        var regu = "^[ ]+$";
        var re = new RegExp(regu);//为空或纯空格为 true    有值为false
        return re.test(str);
       }
    },
    isChn(){//判断是否为纯中文 true为否 false为是
      return function (str){
          var reg=/^[\u4E00-\u9FA5]+$/;return reg.test(str)?false:true
      }
    },
    isphone(){//手机号格式 true为否 false为是
      return function (str){
          var reg=/^1[3456789]\d{9}$/;return reg.test(str)?false:true
      }
    },
    iscard(){//身份证号格式 true为否 false为是
      return function (str){
          var reg=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/
    	  return reg.test(str)?false:true
      }
    },
  },
  data(){
	  return {
		loading:false,
		btn_shou:false,
		dialogVisible:false,
		dialogVisible2:false,
		activess:{
                name:'',//姓名
				card:'',//身份证号码
				edu_id:'',//学历ID
				party_time:'',//入党日期
				politic_id:'',//党员类别ID
				phone:'',//联系电话
				party_unit:'',//支部名称
				logo:'',//党员头像
				lon:'',//经度
				lat:'',//纬度
				is_float:'0',//是否流动党员
		},
		renbox:[],
		num:'',
		ader:[],
	  }
  },
  methods:{
	  git_act(i,num){//获取数据的同打开狂口
	      if(num==1){
			 this.activess = i;
			 // this.activess.is_local = this.activess.is_local+'';
			 if(this.activess.logo){
				this.ader.push({name:'123',url:this.activess.logo});
			 }
			 this.activess.is_float = this.activess.is_float+'';
		  }
		  this.num = num;
	      console.log(this.activess,num);
	      this.dialogVisible=true;
	  },
	  git_acts(){//提交数据
		 if(this.isNull(this.activess.name)){this.$message.error('请输入 姓名');return false}
		 if(this.isNull(this.activess.card)){this.$message.error('请输入 身份证号码');return false}
		 if(this.iscard(this.activess.card)){this.$message.error('身份证号 格式不正确');return false}
		 if(this.isNull(this.activess.edu_id)){this.$message.error('请选择 学历');return false}
		 if(this.isNull(this.activess.phone)){this.$message.error('请输入 联系电话');return false}
		 if(this.isphone(this.activess.phone)){this.$message.error('联系电话 格式不正确');return false}
		 if(this.isNull(this.activess.party_unit)){this.$message.error('请输入 支部名称');return false}
		 if(this.isNull(this.activess.politic_id)){this.$message.error('请选择 党员类别');return false}
		 if(this.isNull(this.activess.party_time)){this.$message.error('请选择 入党日期');return false}
		 if(this.isNull(this.activess.lon)){this.$message.error('请选择 经度');return false}
		 if(this.isNull(this.activess.lat)){this.$message.error('请选择 纬度');return false}
		 let url = this.num==1?'/dj/user_pc/member_modify':'/dj/user_pc/member_insert';
		 $.ajax({url:url,type:'post',data:this.activess,dataType:'json',success:(res)=> {
		 	if(Object.prototype.toString.call(res) != '[object Object]'){res = JSON.parse(res)}
		 	 console.log(res,'提交');
		 	 if(res.code==200){
				this.$parent.git_act();
		 		this.$message({message: '操作成功',type: 'success'});
		 		this.dialogVisible=false;
				this.qin();
		 	  }else{
		 		 this.$message.error(res.msg);
		 	  }
		 	}
		 })
	  },
	  
	  qin(){//清除
	  	this.activess={
                name:'',//姓名
				card:'',//身份证号码
				edu_id:'',//学历ID
				party_time:'',//入党日期
				politic_id:'',//党员类别ID
				phone:'',//联系电话
				party_unit:'',//支部名称
				logo:'',//党员头像
				lon:'',//经度
				lat:'',//纬度
				is_float:'0',
		};
		this.ader = [];
	  },
	  handleClose(done){//监测用户点击x
	     this.$confirm('确定取消关闭吗？','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type: 'warning'
	     }).then(() => {
	  	   this.dialogVisible = false;
	  	   this.qin();
	  	}).catch(() => {});
	  },
	 
	 handlePictureCardPreview(file) {//查看大图
	         this.dialogImageUrl = file.url;
	         this.dialogVisible2 = true;
	 },
	 qing_sur(response, file){//上传照片
	 		if(response.code==200){
	 			this.activess.logo = response.data
	 			console.log(this.activess.logo,'123123');
	 			this.$message({message: '上传成功',type: 'success'});
	 		}else if(response.code==300){
	 			this.$message.error('无法上传动态图片！');
				this.ader = []
	 		}else{this.$message.error('上传失败');console.log(response);this.ader = []}
	 },
	 handleRemove(file) {//删除图片
	    console.log(file);
	    this.activess.logo = '';
	 }, 
	 
  },
  mounted(){
	  // this.git_ren()
  }
}
</script>
<style scoped="scoped">
	.tabinp{
		width:70%;
		float:left;
	}
	.pbox a{
		color:red;
	}
	.pbox{
		float:left;
		width:110px;
		height:100%;
		margin-right:15px;
		text-align: right;
	}
	.tabs{
		width:100%;
		height:45px;
		line-height:45px;
		font-size:15px;
		margin-bottom:10px;
	}
	
</style>
